<template>
	<view class="stopcarpay">
		<view class="stopcarpay-item" v-for="(item,index) in 2" :key="index">
			<view class="title">
				<view class="item-title">
					<view class="">
						待缴费用
					</view>
					<view class="" style="color: #2ed477;">
						浙B·C7788
					</view>
				</view>
				<view class="price">
					<text style="font-size: 20rpx;">￥</text>
					<text style="font-size: 40rpx;">300.00</text>
				</view>
			</view>
			<view class="content">
				<view class="item">
					<text class="item-name">停车地点</text>
					<text>南航碧桂园停车场</text>
				</view>
				<view class="item">
					<text class="item-name">停车时间</text>
					<text>2022/01/09 10:00-12:00</text>
				</view>
				<view class="item">
					<text class="item-name">停车时长</text>
					<text>2h</text>
				</view>
			</view>
			<button class="Btns" @click="gopay">立即缴费</button>
		</view>
	</view>
</template>

<script setup>
	const gopay = () => {
		uni.navigateTo({
			url: '/pages/server/views/EnterPay/EnterPay'
		})
	}
</script>

<style lang="scss">
	.stopcarpay {
		height: calc(100vh - 80rpx);
		background-color: #fcfcfd;
		padding: 40rpx;

		.stopcarpay-item {
			padding: 30rpx;
			background-color: white;
			border: 2rpx solid #f2f2f2;
			margin-bottom: 40rpx;

			.Btns {
				background-color: #006eff;
				color: white;
				font-size: 30rpx;
			}

			.content {
				.item {
					font-size: 28rpx;
					margin: 30rpx 0rpx;

					.item-name {
						color: #9c9c9b;
						margin-right: 20rpx;
					}
				}
			}


			.title {
				border-bottom: 2rpx dashed #f2f2f2;
				border-width: 5rpx;

				.item-title {
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					margin-bottom: 15rpx;
				}

				.price {
					color: #f46363;
					margin-bottom: 20rpx;
				}
			}
		}
	}
</style>